import React, { Component, useEffect } from "react";

//‌useEffect‌ 是 React 16.8 版本引入的一个钩子函数，用于在函数组件中执行副作用操作。
// 副作用是指在组件渲染过程中，可能会对外部环境产生影响的操作，比如数据获取、订阅事件、操作 DOM等.

//useEffect接受两个参数：一个是副作用函数，另一个是依赖数组。
class App extends Component {
  state = {
    isCreated: true,
  };
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.setState({
              isCreated: !this.state.isCreated,
            });
          }}
        >
          click
        </button>
        {/* {this.state.isCreated?<Child/>:""} */}
        {this.state.isCreated && <Child />}
      </div>
    );
  }
}

function Child() {
  useEffect(() => {
    window.onresize = () => {
      console.log("resize");
    };

    var timer = setInterval(() => {
      console.log("111");
    }, 1000);

    return () => {
      console.log("组件销毁时调用");

      window.onresize = null;
      clearInterval(timer);
    };
  }, []);

  return <div>child</div>;
}
export default App